<template>
	<view>
		<view class="week-food-list" v-for="(week_food, index) in food_list" :key="index">
			<view class="head">
				<text>第{{ $db.numberToChangeNum(Number(index) + 1) }}周</text>
			</view>
			<view class="food-list" v-for="(item, k) in week_food" :key="k">
				<view class="day">
					<text>第{{ $db.numberToChangeNum(Number(k) + 1) }}天</text>
				</view>
				<view class="food">
					<view class="wu-food" v-if="'cover' in item[0]">
						<text class="title">午餐</text>
						<image :src="item[0].cover" mode=""></image>
						<view class="name-and-type">
							<text class="name">{{ item[0].name }}</text>
							<text class="type">{{ item[0].goods_type }}</text>
						</view>
					</view>
					<view class="wu-food" v-else>
						<text class="title">午餐</text>
						<image :src="item[0].cover" mode=""></image>
						<view class="name-and-type">
							<text class="name">无</text>
							<!-- <text class="type">{{ item[0].goods_type }}</text> -->
						</view>
					</view>
					<view class="wan-food" v-if="'cover' in item[1]">
						<text>晚餐</text>
						<image :src="item[1].cover" mode=""></image>
						<view class="name-and-type">
							<text class="name">{{ item[1].name }}</text>
							<text class="type">{{ item[1].goods_type }}</text>
						</view>
					</view>
					<view class="wan-food" v-else>
						<text>晚餐</text>
						<image :src="item[1].cover" mode=""></image>
						<view class="name-and-type">
							<text class="name">无</text>
						</view>
					</view>
				</view>
			</view>
			<view class="food-list-end" v-if="week_food.length === 6">
				<view class="day"><text>第七天</text></view>
				<view class="info"><text>休息日</text></view>
			</view>
		</view>
		<view class="close-btn" @click="goBack()"><text>关闭</text></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_id: '',
				food_list: [],
				type: 0,
			};
		},
		onLoad(o) {
			this.order_id = o.order_id;
			if (o.type) {
				this.type = o.type
			}
		},
		mounted() {
			this.getData();
		},
		methods: {
			getData: function() {
				this.$api
					.getOrderMenus({
						order_id: this.order_id
					})
					.then(res => {
						console.log(res);
						let index = 0,
							food_arr = [],
							dinner_length = !res.data.menus_dinner ? res.data.menus_lunch.length : res.data.menus_dinner.length;
						console.log(dinner_length);
						for (let i = 0; i < dinner_length; i++) {
							console.log(i);
							if (!food_arr[index]) {
								food_arr[index] = [];
							}
							let food_item = [(!res.data.menus_lunch ? [] : res.data.menus_lunch[i]), (!res.data.menus_dinner ? [] : res.data
								.menus_dinner[i])];
							console.log(food_item);
							food_arr[index].push(food_item);
							if (food_arr[index].length == 6) {
								index++;
							}
						}
						this.food_list = food_arr;
						console.log(this.food_list);
					});
			},
			goBack: function() {
				switch (this.type) {
					case '0':
						this.$db._GoBack();
						break;
					case '1':
						this.$db._NavTo('index', {}, this.$db.navToMethod[2])
						break;
					case '2':
						this.$db._NavTo('index', {}, this.$db.navToMethod[2])
						break;
					default:
						break;
				}
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #ffffff;
		margin-bottom: 120rpx;
	}

	.week-food-list {
		.head {
			padding: 32rpx;
			text-align: center;
			border-bottom: 2rpx solid rgba(242, 242, 242, 1);
			letter-spacing: 8rpx;

			text {
				font-size: 32rpx;
				font-weight: 700;
				color: rgba(37, 37, 37, 1);
			}
		}

		.food-list {
			display: flex;
			border-bottom: 2rpx solid #f2f2f2;

			.day {
				flex-grow: 0;
				flex: 0 0 72rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #fafafa;

				text {
					font-size: 24rpx;
					letter-spacing: 8rpx;
					writing-mode: vertical-lr;
				}
			}

			.food {
				flex-grow: 1;

				.wu-food,
				.wan-food {
					padding: 14rpx 0 14rpx 28rpx;
					display: flex;
					align-items: center;

					.title {
						font-size: 28rpx;
						color: #494949;
					}

					image {
						margin: 0 28rpx;
						width: 76rpx;
						height: 76rpx;
						border-radius: 10rpx;
					}

					.name-and-type {
						display: flex;
						flex-flow: column;
						justify-content: space-between;
					}
				}

				.wu-food {
					border-bottom: 2rpx solid rgba(242, 242, 242, 1);
				}
			}
		}

		.food-list-end {
			display: flex;
			border-bottom: 2rpx solid #f2f2f2;

			.day {
				flex: 0 0 72rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #fafafa;

				text {
					letter-spacing: 8rpx;
					writing-mode: vertical-lr;
				}
			}

			.info {
				padding: 84rpx;
				font-size: 28rpx;
				color: #d5b24e;
			}
		}
	}

	.close-btn {
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 20rpx 0;
		width: 100%;
		text-align: center;
		background: #ae9f73;

		text {
			font-size: 28rpx;
			color: #f7f7f7;
		}
	}
</style>
